<template>
	<view class="page">
		<!-- #ifdef MP-WEIXIN -->
		<view class="icon" @tap="showRightDrawer">
			<uni-icon type="bars" color="#666666" size="22"></uni-icon>
		</view>
		<!-- #endif -->

		<!-- 轮播图 -->
		<view class="page-section-spacing">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<view v-for="(value,key) in bannerList" :key="key" @click="goBannerDetails(value.url)">
					<view>
						<swiper-item>
							<image class="swiper-item" :src="value.imagePath"></image>
						</swiper-item>
					</view>
				</view>

			</swiper>
		</view>


		<!-- 侧滑菜单 -->
		<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer">
			<view style="padding:30upx;">
				<view class="uni-title">抽屉式导航</view>
				<view class="uni-helllo-text">
					这是抽屉式导航组件使用示例，你可以在这里放置任何内容。关闭抽屉式导航有多种方式：</text>
					<text>\n1.点击本导航之外的任意位置；</text>
					<text>\n2.点击如下红色按钮；</text>
					<!-- #ifdef APP-PLUS -->
					<text>\n3.点击页面右上角的按钮；</text>
					<!-- #endif -->
				</view>
				<view class="uni-common-mt">
					<button class="button" type="warn" size="mini" @tap="closeRightDrawer">关闭抽屉式导航</button>
				</view>
				<view class="uni-list uni-common-mt">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover">
						<view class="uni-list-cell-navigate uni-navigate-right" @tap="item1">
							Item1
						</view>
					</view>
					<view class="uni-list-cell uni-list-cell-last" hover-class="uni-list-cell-hover">
						<view class="uni-list-cell-navigate uni-navigate-right" @tap="item2">
							Item2
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>

		<!-- 列表 -->
		<view class="uni-list">
			<view v-for="(listitem,key) in articleList" :key="key" @click="goListDetails(listitem.link)">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" v-if="showImg" src="../../static/image/android.png"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top uni-text">{{listitem.title}}</view>
						<view class="uni-flex uni-row">
							<view class="text">{{listitem.chapterName}}</view>
							<view class="text">{{listitem.superChapterName}}</view>
							<view class="text">{{listitem.niceDate}}</view>
						</view>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDrawer from '../../components/uni-drawer.vue';
	import uniIcon from '../../components/uni-icon.vue';
	export default {

		components: {
			uniDrawer,
			uniIcon
		},

		//页面初始化加载
		data() {
			return {
				showImg: false,
				rightDrawerVisible: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: [],
				articleList: []
			}
		},
		onLoad() {
			console.log('onLoad');
			setTimeout(() => {
				this.showImg = true
			});


			this.getBannerListData();
			this.getHomeArticleList();

		},
		methods: {
			closeRightDrawer() {
				this.rightDrawerVisible = false;
			},
			showRightDrawer() {
				this.rightDrawerVisible = true;
			},
			item1() {
				this.rightDrawerVisible = false;
				uni.showToast({
					title: 'item1'
				});
			},
			item2() {
				this.rightDrawerVisible = false;
				uni.showToast({
					title: 'item2'
				});
			},
			getBannerListData() {
				uni.request({
					url: 'http://www.wanandroid.com/banner/json',
					method: 'GET',
					success: (data) => {
						//console.log(JSON.stringify(data.data.data));
						this.bannerList = data.data.data;
					},
					fail: (data, code) => {
						console.log('网络请求出错');
					}
				});

			},


			//跳转到轮播图的详情页
			goBannerDetails(s) {
				console.log('点击跳转到详情页面'+s);
				uni.navigateTo({
					url: "/pages/list/listdetails?htmlUrl=" + encodeURIComponent(JSON.stringify(s))
				});
			},
			//跳转到列表详情页
			goListDetails(s) {
				console.log(s);
				uni.navigateTo({
					//	url: "/pages/list/listdetails?htmlData="+encodeURIComponent("http://www.wanandroid.com/article/list/0?cid=73")	
					url: "/pages/list/listdetails?htmlUrl=" + encodeURIComponent(JSON.stringify(s))
				});
			
			},
			getHomeArticleList() {
				uni.request({
					url: 'http://www.wanandroid.com/article/list/0/json',
					success: (articleData) => {
						this.articleList = articleData.data.data.datas;
						//console.log(JSON.stringify(this.articleList));
					}
				});
			}
		},
		onNavigationBarButtonTap(e) {
			this.rightDrawerVisible = !this.rightDrawerVisible
		},
		onBackPress() {
			// 返回按钮监听
			if (this.rightDrawerVisible) {
				this.rightDrawerVisible = false;
				return true;
			}

		}

	}
</script>

<style>
	.flex-item {
		width: 200upx;
		line-height: 30upx;
		font-size: 26upx;
		color: #8f8f94;
	}

	.text {
		margin: 15upx 10upx;
		padding: 0 20upx;
		background-color: #ebebeb;
		height: auto;
		line-height: 46upx;
		text-align: center;
		color: #777;
		width: auto;
		font-size: 20upx;
	}



	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
		padding: 20px;
	}

	,
	.swiper {
		height: 300upx;
	}

	.swiper-item {
		display: block;
		height: 360upx;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.swiper-list {
		margin-top: 40upx;
		margin-bottom: 0;
	}
</style>
